<!DOCTYPE html>
<html>
<head>
    <title>库存现金记录</title>
    <style>
         h1 {
            text-align: center; /* 水平居中 */
        }
         h2 {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
        table {
           /*  width: 100%; 使表格宽度占满容器 */
            width: 1200px;
            border-collapse: collapse; /* 合并边框 */
            margin: 0 auto; /* 上下外边距为 0，左右外边距自动，实现水平居中 */
        }
        th, td {
            text-align: center; /* 文本居中 */
            padding: 8px; /* 添加内边距 */
            border: 1px solid #ddd; /* 设置边框样式 */
        }
        th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
        .price-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        .new-price-input {
            width: 80px;
            margin-top: 5px; /* 与按钮的间距 */
        }
        .update-button {
            margin-top: 5px; /* 与输入框的间距 */
        }
        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .search-input {
            width: 300px;
            padding: 8px;
            margin-right: 10px;
        }
        .search-button {
            padding: 8px 16px;
        }
         .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .pagination a {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        .pagination a:hover {
            background-color: #007BFF;
            color: white;
        }
        .pagination .active {
            background-color: #007BFF;
            color: white;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .pagination a, .pagination span {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        
        .pagination a:hover, .pagination .active {
            background-color: #007BFF;
            color: white;
        }
        
        .pagination .ellipsis {
            padding: 8px 15px;
            margin: 0 5px;
            color: #333;
}

        .link-container {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
    </style>
</head>
<body>
    <h1>库存现金记录</h1>
    <div class="search-container">
        <form method="GET" action="{{ url_for('cash_records') }}">
            <input type="text" name="search" value="{{ search_query }}" placeholder="输入搜索关键词" class="search-input">
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>金额</th>
                <th>交易类型</th>
                <th>交易分类</th>
                <th>交易描述</th>
                <th>交易日期</th>
                <th>交易后余额</th>
            </tr>
        </thead>
        <tbody>
            {% for record in cash_records.items %}
            <tr>
                <td>{{ record.id }}</td>
                <td>{{ record.amount | round(2) }} 元</td>
                <td>{{ record.transaction_type }}</td>
                <td>{{ record.category }}</td>
                <td>{{ record.description }}</td>
                <td>{{ record.transaction_date.strftime('%Y-%m-%d') }}</td>
                <td>{{ record.balance | round(2) }} 元</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <h2>库存现金总余额: {{ total_balance | round(2) }} 元，预存现金总余额: {{ total_predeposit_balance | round(2) }} 元，合计: {{ total_cash_balance | round(2) }} 元</h2>
    <div class="pagination">
        {% if cash_records.has_prev %}
            <a href="{{ url_for('cash_records', page=cash_records.prev_num, search=search_query) }}">上一页</a>
        {% endif %}
        
        {% for page_num in cash_records.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page_num %}
                {% if page_num == cash_records.page %}
                    <span class="active">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('cash_records', page=page_num, search=search_query) }}">{{ page_num }}</a>
                {% endif %}
            {% else %}
                <span class="ellipsis">…</span>
            {% endif %}
        {% endfor %}
        
        {% if cash_records.has_next %}
            <a href="{{ url_for('cash_records', page=cash_records.next_num, search=search_query) }}">下一页</a>
        {% endif %}
    </div>
    <div class="link-container">
        <a href="{{ url_for('list_products') }}">返回产品列表</a>
        <a href="{{ url_for('index') }}">返回主页</a>
    </div>
</body>
</html>